<template>
  <div style="overflow: hidden">
    <div class="banner" style="position: relative;overflow: hidden">
      <img :src="imgUlr">
      <div class="searchBox">
         <div class="search">
           <div class="searchTop">
             <span class="bout " :class="{'check':fromData.lcl ==0}" @click="checkTypeFn(0)">
               整箱业务
             </span>
             <span class="bout" :class="{'check':fromData.lcl ==1}"  @click="checkTypeFn(1)">
               拼箱业务
             </span>
           </div>
           <div class="clearfix searchCent">
             <div class="left">
               <p>起运地</p>
               <el-autocomplete :disabled="fromData.lcl ==1"
                 class="inline-input"
                 v-model="fromData.originText"
                 :fetch-suggestions="querySearch"
                 value-key="value"
                 value = 'id'
                 placeholder="车站/车站代码"
                 @select="handleSelect"
               ></el-autocomplete>
               <!--<input type="text" placeholder="城市/车站代码" v-model="fromData.originText" @change="changeCity(fromData.originText,1)" @keyup="changeCity(fromData.originText,1)"/>-->
             </div>
             <div class="left" style="width: 20px;line-height: 100px;height:50px;font-size: 20px">
                        -
             </div>
             <div class="left" :destStationCityData="destStationCityData">
               <p>目的地</p>
               <el-autocomplete :disabled="fromData.lcl ==1"
                 class="inline-input"
                 v-model="fromData.destText"
                 :fetch-suggestions="querySearch2"
                 value-key="value"
                 value = 'id'
                 placeholder="车站/车站代码"
                 @select="handleSelect2"
               ></el-autocomplete>
               <!--<input type="text" placeholder="城市/车站代码" v-model="fromData.destText" />-->
             </div>
             <div class="searchBout left" @click="sechlistFn()">
               <p> </p>
               <img :src="sech"/>
             </div>
           </div>
         </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
  .inline-input{width: 310px}
  .banner img{width: 100%}
 .bout{ width:90px; height:30px;background:none;color: #fff;line-height:30px;padding:5px 10px;margin-right: 20px;font-size: 14px;cursor: pointer}
 .check{background:#fff;color: #999}
  footer{width: 100%;clear: both }
 .searchTop{text-align: left}
 .searchCent{margin-top: 25px;color: #fff;}
 .searchCent p{text-align: left;font-size: 14px;line-height: 30px;height: 30px}
  body{background-color:#f7f7f7}
  .searchBox{ position:absolute;top: 50%;left:50%;width:700px;height:125px;z-index:100;}
  .search{ position:absolute;top: -50%; left:-50%;width:700px;height:125px;background-color:rgba(0,0,0,0.35);padding: 20px 33px ;}
  .search input{border:0px none;background:#fff;padding: 8px 10px;width:280px;line-height: 25px;height:25px;border-radius:5px;font-size:16px;font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif}
  .searchBout { margin-left: 20px}
  .search input[type=text]{font-size: 16px}
  .searchBout img{width:40px; position: relative;cursor: pointer}
  .card{ }
  .imgBox{width: 100%;height: auto;padding: 0px;overflow: hidden}
  .imgBox img{width: 100%;}
  @media (max-width: 1200px) {

  }
</style>
<script>
  import setPublc from '@/components/public/set.vue'
  import HeaderPublc from '@/components/public/herderIndex.vue'
  import Public from '@/vuex/public'
  import imgDeft from '../../../../static/img/banner01.png'
  import sech from '../../../../static/img/icon/sech.png'
  import {mapState, mapActions} from 'vuex'
  export default {
    name: 'my-adminChart',
    created () {
      this.getDestStationCity({lcl:0})

    },
    data () {
      return {
        user:{},
        urlType:'',
        checkType: 1,
        height: '400px',
        sech:sech,
        // fromData:{
        //   originText:'',
        //   destText:'',
        //   origin:'',
        //   dest:'',
        //   lcl:0
        // },
        restaurant:[],
        city2:[],
        city3:[],
        page:{page:1,pageSize:5,count:0},
        tableData1:{title:'',img:''},
        tableData2:[],
        input:null,
        errorText:'',
        imgUlr:imgDeft,
        shech1:'',
        shech2:''
      }
    },
    methods: {
      ...mapActions({
        searchList: 'searchList',
        getDestStationCity:'getDestStationCity',
        lclFindLines:'lclFindLines'
      }),
      querySearch(queryString, cb) {
        if(this.shech1 != queryString){
          this.fromData.origin = '';this.fromData.originSite = ''
        }
        var restaurants = this.restaurant;
        var station = this.restaurant;

        var results = queryString ? restaurants.filter(this.createCiTYfiter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        if(results.length<=0){
           results = queryString ? station.filter(this.createFilter(queryString)) : station;
        }
        cb(results);
      },
      createCiTYfiter(queryString){
        return (restaurant) => {
         var str =JSON.stringify(restaurant.cityCN)
          str +=JSON.stringify(restaurant.cityEn)
          str +=JSON.stringify(restaurant.citySX)
          var s = restaurant.stationCN? (' / '+ restaurant.stationCN +' / '+ restaurant.code ):''
          restaurant.value = restaurant.countryCN +' / '+ restaurant.cityCN+s

          if(str.toLowerCase().indexOf(queryString.toLowerCase()) > -1){


          }
          return (str.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
        };
      },
      createFilter(queryString) {
        return (restaurant) => {
          var str = JSON.stringify(restaurant.code)
          str +=JSON.stringify(restaurant.stationCN)
          str +=JSON.stringify(restaurant.stationEN)
            restaurant.type = "station"
            restaurant.value = restaurant.cityCN +' / '+ restaurant.stationCN +' / '+ restaurant.code
          return (str.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
        };
      },
      handleSelect(item) {

        this.fromData.originSite = item.id
       this.fromData.origin = item.cityId
      },
      createCiTYfiter2(queryString){
        return (restaurant) => {
          var str =JSON.stringify(restaurant.cityCN)
          str +=JSON.stringify(restaurant.cityEn)
          str +=JSON.stringify(restaurant.citySX)
          var s = restaurant.stationCN? (' / '+ restaurant.stationCN +' / '+ restaurant.code ):''
          restaurant.value = restaurant.countryCN +' / '+ restaurant.cityCN+s
          if(str.toLowerCase().indexOf(queryString.toLowerCase()) > -1){

          }
          return (str.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
        };
      },
      querySearch2(queryString, cb) {
        if(this.shech2 != queryString){
          this.fromData.dest = '';this.fromData.destSite = ''
        }
        var restaurants = this.fromData.lcl==1? this.city3:this.city2
        var station = this.fromData.lcl==1? this.city3:this.city2

        var results = queryString ? restaurants.filter(this.createCiTYfiter2(queryString)) : restaurants;
        if(results.length<=0){
          results = queryString ? station.filter(this.createFilter2(queryString)) : station;
        }

        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter2(queryString) {

        return (restaurant ) => {
          // 先查
          var str = JSON.stringify(restaurant.code)
          str +=JSON.stringify(restaurant.stationCN)
          str +=JSON.stringify(restaurant.stationEN)
          restaurant.value = restaurant.countryCN+' / '+restaurant.stationCN +' / '+ restaurant.code
          restaurant.all == 'stion'
          return (str.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
        };
      },
      handleSelect2(item) {

        // this.fromData.dest = item.id

        this.fromData.destSite = item.id
        this.fromData.dest = item.cityId
      },

      // 线路类型
      checkTypeFn(a){


        //拼箱直接查，不给搜索

        if(a == 1){
          this.lclFindLines({})
          if(this.$route.name == "searchList"){
          }else {
            this.goPage('searchList')
          }
        }
       // this.fromData.lcl = a
      var   parm ={
        origin:"",
        dest:"",
        originSite:'',
        destSite:'',
        lcl:a,
        }
        this.$store.commit('searchParamFn',parm)
        this.$store.commit('transportListTo',{body:{data:[],count:0}})
      },
      goMap (id) {
        this.$router.push({ name: 'map',query:{page:this.$route.name,id:id} })
      },
      // 去下个页面
      goPage (name) {
        this.$router.push({name: name})
      },
      // 查询
      sechlistFn () {
        if(this.fromData.lcl ==1 ){
          return
        }
          this.shech1 = this.fromData.originText;
          this.shech2 = this.fromData.destText;
          if(!this.fromData.dest && !this.fromData.destSite){
            this.errorText = '请选择目的地城市'
            this.openError(this.errorText)
            return
          }

        this.$store.commit('searchParamFn',this.fromData)
        this.$store.commit('transportListTo',0)
        var parm = {
          origin:this.fromData.origin,
          dest:this.fromData.dest,
          lcl:this.fromData.lcl,
          originSite:this.fromData.originSite,
          destSite:this.fromData.destSite,
          page:1,
          pageSize:10
        }
        this.searchList(parm)
        if(this.$route.name == "searchList"){
        }else {
          this.goPage('searchList')
        }
      },

      // 轮播自适应
      size(){
        var imgDom = document.getElementById('bannerMag').getElementsByClassName('el-carousel__container');
        var imgH = document.getElementById('Mag').getElementsByClassName('imgBox')[0].getElementsByTagName('img')
        imgH = imgH[0].clientHeight
        var doc = document.getElementById('bannerMag').getElementsByClassName('el-carousel__container')
        var doc2 = document.getElementById('bannerMag')
        if(imgH<200){
          imgH = 200
        }
        doc2.style = 'height:'+imgH+'px'
        doc[0].style = 'height:'+imgH+'px'
      },
      openSuccess (text) {
        this.$message({
          message: text,
          type: 'success'
        })
      },
      openError (text) {
        this.$message.error(text)
      },

    },
    computed: {
      fromData:function () {
        return this.searchParam
      },
      ListData: function () {
        var parm = this.updateList
        if (parm) {
          this.updateListFn(parm)
        }
        return 1
      },
      transport: function () {
        var parm = this.transportList || null
        // if (parm) {
        //   if(parm.code == 1){
        //     this.errorText = '暂无此类订单'
        //    // this.openError(this.errorText)
        //   }
        //   if(parm.code == -1){
        //     this.errorText = '数据请求异常，请稍后重试'
        //    // this.openError(this.errorText)
        //   }
        //   if(parm.code == 0){
        //     this.errorText = null
        //     if(parm.body.data[1]){
        //
        //     }else {
        //         this.$store.commit('transportListTo', null)
        //         this.goMap(parm.body.data[0].id)
        //     }
        //     if(!parm.body.data[0]){
        //       this.errorText = '暂无此类订单'
        //       this.openError(this.errorText)
        //     }
        //   }
        //   parm = parm.body.data
        // }else {
        //   this.errorText = null
        // }
        return 1
      },
      DetailData() {
        var parm = this.Detail
        if (parm) {
          this.dataFn(parm)
        }
        return 1
      },
      destStationCityData() {
        var parm = this.destStationCity
        if (parm) {
         this.city2 = parm.body.data
        }
        return 1
      },
      ...mapState([
        'Detail',
        'updateStatus',
        'language',
        'searchParam',
        'transportList',
        'destStationCity'
      ])
    },
    mounted () {

      // var width = document.body.clientWidth;
      // var dom = document.getElementById('main');
      // var w = width-240;
      // dom.style = 'max-width:'+ w +'px';

      var that = this
      setTimeout(function () {
        that.restaurant = Public.publicLo.getCity3('6915')
        that.city2 = Public.publicLo.getCityFan('6915')
       // that.size()
      },1000)
    },
    components: {
      HeaderPublc: HeaderPublc,
      setPublc:setPublc,
    }
  }
</script>

